<template>
  <my-table listPath="position/page" savePath="position/save" deletePath="position/delete" :table="table" :pageParams="pageParams" :rules="rules" dialogTitle="对话框" :pageSize="[5,10,20,35,50]" :dialogForm="form" @show-dialog="sdialog">
    <template v-slot:dialogSlot>
      <el-form-item label="职位名称" prop="name">
          <el-input v-model="form.name" clearable></el-input>
      </el-form-item>
      <el-form-item label="部门名称" prop="deptId">
          <tree-select v-if="showTree" :props="props" :options="option" @getValue="treeval" :valueTitle1="title"></tree-select>
      </el-form-item>
    </template>
  </my-table>
</template>

<script>
  import myTable from '../../components/myTableszxt.vue';
    import treeSelect from '../../components/treeSelect.vue'
  export default{

    name:'premission',
    components:{myTable,treeSelect},
    data() {

      return {
        option:{},
        option2:{},
        showTree:false,
        props:{
          value:'id',       // ID字段名
          label: 'name',     // 显示名称
          children: 'childrens'
        },
       pageParams:{
            limit:10,
            page:1,
            sort:'id',
            order:'asc',
            search:''
        }
        ,
        form:{
          name:'',
          deptId:'',
        },
        title:'',
        table:[
          {
            title:'职位名称',
            field:'name'
          },
          {
            title:'部门名称',
            field:'deptName'
          },
        ],
        rules:{
          name: [{required: true, message: '请输入职位名称', trigger: 'blur' }],
          deptId:[{required: true, message: '请选择部门', trigger: 'blur' }],
          roles: [
               { type: 'array', required: true, trigger: 'blur', message: '角色不能为空' }
          ]
        },

      }
      },
      methods:{
        treeval(val){
         this.form.deptId=val;
        },
        sdialog(val){
          this.title=null;
          this.$ajax.post('dept/combotree',{}).then(res=>{
                 var result=res.data;
                 if(result.success){
                  this.showTree=false;
                  this.option=result.data;
                  this.$nextTick(() => {
                      this.showTree=true;
                  });
                  if(val.deptNameId){
                    this.form.deptId=val.deptNameId;
                    this.title=val.deptName;
                  }
                 }
           }).catch(res=>{})
        },
      },  
   }
</script>

<style>
</style>
